<template>
  <div class="scroll-table">
    <div class="scroll-table__header">
      <slot name="header">
        <div v-for="item of columns" :class="item.className" :key="item.prop">
          {{ item.label }}
        </div>
      </slot>
    </div>
    <Vue3SeamlessScroll
      :list="tableData"
      class="scroll-table__scroll"
      :step="0.2"
      :wheel="true"
      :hover="true"
      :limitScrollNum="3"
    >
      <slot name="default" :list="tableData">
        <div class="scroll-row" v-for="item in tableData">
          <div
            class="scroll-row__item"
            :class="col.className"
            v-for="col of columns"
            :key="col.prop"
          >
            {{ item[col.prop] }}
          </div>
        </div>
      </slot>
    </Vue3SeamlessScroll>
  </div>
</template>

<script setup>
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";

defineProps({
  // 表头
  columns: {
    type: Array,
    default: () => [],
  },
  // 列表数据
  tableData: {
    type: Array,
    default: () => [],
  },
});
</script>

<style lang="scss" scoped>
.scroll-table {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0px 20px;
  box-sizing: border-box;
  &__header {
    display: flex;
    height: 40px;
    color: #ffffff;
    // background: #165bf4;
    align-items: center;
    font-weight: 600;
    font-size: 14px;
    & > div {
      padding: 0px 23px;
      box-sizing: border-box;
      flex: 1;
      width: 0px;
    }
  }
  &__scroll {
    margin-top: 1px;
    flex: 1;
    height: 0;
    overflow: hidden;
    .scroll-row {
      font-size: 14px;
      color: #e9f7ff;
      height: 40px;
      display: flex;
      align-items: center;
      &:nth-child(2n) {
        background-color: transparent;
      }
      &:nth-child(2n + 1) {
        background-color: rgba(13, 76, 144, 0.5);
      }
      &__item {
        flex: 1;
        width: 0px;
        padding: 0px 23px;
        box-sizing: border-box;
      }
    }
  }
}

.scroll .item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 0;
}
.jk-index {
  flex: 0.3 !important;
}
.jk-name {
  flex: 1.3 !important;
}
.ly-name {
  flex: 2 !important;
}
.ly-type {
  flex: 0.3 !important;
  // background: #51d5ff;
  // border-radius: 4px;
  // color: black;
}
</style>
